<template>
  <div>
   <div>
      <el-card class="box-card">
        <div class="clearfix">
         <h2>故障报修</h2>
        </div>
        <el-row :gutter="20" style="margin-left:20px">
          <el-col :span="6">
            报修标题：<el-input
              placeholder="报修标题"
              class="input1"
              v-model="formline.key"
              style="width: 200px"
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            地址：<el-input
              placeholder="地址"
              class="input1"
              v-model="formline.address"
              style="width: 240px"
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            电话：<el-input
              placeholder="电话"
              class="input1"
              v-model="formline.tel"

              style="width: 240px"
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-dropdown>
              按时间查询：
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="defaultTime2"
                style="width:60%"
              >
            </el-date-picker>
            </el-dropdown>
          </el-col>
          <el-col :span="6" style="margin-top:20px">
            维修状态：<el-dropdown>
              <el-select
                v-model="formline.statename"

                placeholder="请选择"
                multiple
                class="select"
              >
                <el-option
                  v-for="item in state"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-dropdown>
          </el-col>
          <el-col :span="6" style="margin-top:20px">
            维修类型：<el-dropdown>
              <el-select
                v-model="formline.typename"
                placeholder="请选择"
                multiple
                class="select"
              >
                <el-option
                  v-for="item in getrepairslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-dropdown>
          </el-col>
          <el-col :span="6" style="margin-top:20px">
            <el-button type="primary"
                @click="repairlist()"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <div class="text item"></div>
      </el-card>
    </div>
    <div class="caozuo">
      <el-button type="danger" 
        @click="DelAll">批量删除</el-button
      >
    </div>
    <el-table
          size="mini"
          @selection-change="handleSelectionChange"
          :data="repairslist"
          background-colog
          border
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="id" width="150"></el-table-column>
          <el-table-column
            prop="typename"
            label="故障类型"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="维修地址"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="images"
            label="故障图片"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="故障描述"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="statename"
            label="维修状态"
            width="150"
          ></el-table-column>
          <el-table-column prop="username" label="业主名称"> </el-table-column>
      <el-table-column prop="addtime" label="维修日期"> </el-table-column>
          <el-table-column label="操作" width="180px">
            <template v-slot:default="scope">
              <el-button type="primary" size="small" @click="update(scope.row)">修改</el-button>
               <el-button
                type="danger"
                size="small"
                @click="del(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
            title="修改故障报修"
            :visible.sync="xiugai"
            width="40%"
            align="center">
         <el-form
        :model="updata"
        ref="ruleForm"
        label-width="100px"
        class="tianjia demo-ruleForm"
      >
   <el-form-item label="维修地址">
      <el-select v-model="updata.address" placeholder="请选择">
        <el-option label="九洲华庭" value="九洲华庭"></el-option>
        <el-option label="汤臣一品" value="汤臣一品"></el-option>
      </el-select>
      <el-select v-model="updata.address" placeholder="请选择">
        <el-option label="一区" value="一区"></el-option>
        <el-option label="二区" value="二区"></el-option>
      </el-select>
    </el-form-item>
  
  <el-form-item label="故障类型" prop="content">
    <el-dropdown>
              <el-select
                v-model="updata.content"
                placeholder="请选择"
                multiple
                class="select"
              >
                <el-option
                  v-for="item in getrepairslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-dropdown>
  </el-form-item>
  <el-form-item label="业主名称" prop="userid">
    <el-input v-model="updata.userid"></el-input>
  </el-form-item>
  <el-form-item label="电话" prop="tel">
    <el-input v-model="updata.tel"></el-input>
  </el-form-item>
  <el-form-item label="故障状态" prop="statename">
   <el-dropdown>
              <el-select
                v-model="updata.statename"
                placeholder="请选择"
                multiple
                class="select"
              >
                <el-option
                  v-for="item in state"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-dropdown>
  </el-form-item>
  <el-form-item label="故障描述" prop="content">
    <el-input v-model="updata.content"></el-input>
  </el-form-item>
  <el-form-item label="头像" prop="name" style="width: 300px">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"

            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="xiugai = false">取 消</el-button>
    <el-button type="primary" @click="amend"
>确 定</el-button>
  </span>
</el-dialog>
    <Pagination
      :total="total"
      @changePage="getRoleList"
      />
  </div>
</template>
<script>
import _ from "lodash";
import Pagination from "../common/pages/Page1.vue";
import { repairslist ,getrepairslist,repairsdelete,state,repairsdeletell,repairsadd} from "../../api/user.js";
var token = sessionStorage.getItem("token");
export default {
  components:{
    Pagination
  },
  data() {
    return {
      myHeaders: { Authorization: token },
      imageUrl: '',
      formline: {
          page: 1,
          psize:5,
          total:0,
      },
      loading: true,
      total:0,
			fileList: [],
		  rules: {},
			xiugai: false,
      dialogVisible:false,
      ruleForm: {
          id:'',
          address: '',
          pass: '',
          name: '',
          tel: '',
          typeid:'',
        },
        updata: [
					{
				    id: 0,
            address: "",
            content: "",
            userid: 2,
            tel: "",
            type: 1,
            state:1,
            addtime: "",
            images:"",
					},
				],

        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请填写练习方式', trigger: 'blur' },
            { min: 11, max:11, message: '请输入正确的号码', trigger: 'blur' }
          ],
        },
      query:{},
      value: [],
      tableData: [],
      multipleSelection: [],
      centerDialogVisible: false,
      getrepairslist:[],
      state:[],
      // repair899sdeletell:'',
      addform: {
        label: [],
      },
      list: [],
      repairslist: [],
      getRoleList:[],
      key: "",
      value2: "",
      state:"",
      type:"",
       defaultTime2: [
        new Date(2000, 1, 1, 12, 0, 0),
        new Date(2000, 2, 1, 8, 0, 0),
      ], // '12:00:00', '
    };
  },
  methods: {
    async getRoleList (params) {
        console.log(params)
        const { data } = await http.getAdminList(Object.assign(this.formline, params))
        this.repairlist  = data.list
        this.loading = false
        this.total = data.counts
  },
     update(option) {
				console.log(option);
				this.updata = option;
				this.xiugai = true;
				// this.amend()
				},

				async amend() {
				let res = await repairsadd({
					id: this.updata.id,
					address: this.updata.address,
					content: this.updata.content,
					userid: this.updata.userid,
					tel: this.updata.tel,
					type: this.updata.type,
					images: this.updata.images,
          state: this.updata.state,
          addtime: this.updata.addtime,
				});
				if (res.errCode == "10000") {
					this.$message({
					type: "success",
					message: "修改成功",
					});
					this.xiugai = false;
					this.repairlist();
				}
				},
    async repairlist() {
      const res = await repairslist({
        page:this.formline.page,
        psize:this.formline.psize,
        key: this.formline.key,
      })
      this.repairslist = res.data.list
      this.formline.total= res.data.counts
    },
    async getrepairlist(){
      const res = await getrepairslist()
      this.getrepairslist= res.data.list
      console.log(res);
    },
    async states(){
      const res = await state()
      this.state= res.data.list
      console.log(res);
    },
     //批量删除
    handleSelectionChange(val) {
      console.log(val);
      this.selectID = val;
    },
    DelAll() {
      let ids = [];
      this.selectID.forEach((element) => {
        console.log(element);
        ids.push(element.id);
      });
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let data = await repairsdeletell({
            ids: ids,
          });
          if (data.errCode == "10000") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.repairlist();
          this.getRoleList()

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //单删
     del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
           repairsdelete({id:id}).then((res) => {
            console.log(res);
            if (res.errCode == 10000) {
              this.repairlist();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    handleSizeChange (val) {
      this.formline.psize = val
      this.getRoleList()
    },
    handleCurrentChange (val) {
      this.formline.page = val
       this.getRoleList()
    }, 
       // 上传图片
    handleAvatarSuccess(res, file) {
			  this.imageUrl = URL.createObjectURL(file.raw);
			},
    beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
	  
			  if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},  
    
    },
      mounted() {
    this.repairlist();
    this.getrepairlist()
    this.states()
    this.getRoleList()
  },
};
</script>
<style scoped>
.xiu{
  height: 100px;
}
.dialog-footer{
  margin-left:210px ;
}
h2{
        color:rgb(108, 127, 244);
        margin: 0 40px;
        border-bottom: 1px solid #999;
        line-height: 60px;
        margin-bottom:30px;
    }
    .caozuo{
      margin-top:20px;
      margin-left:40px;
      margin-bottom: 20px;
    }
    .block{
		  text-align: center;
		  margin-top: 20px;
	  }
</style>